<template>
    <keep-alive>
        <component :is="tabComponent"></component>
    </keep-alive>
    <button @click="changeHandle">切换组件</button>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import ComponentA from './ComponentA.vue';
// import ComponentB from './ComponentB.vue';
//注入组件
const AsyncComponentB = defineAsyncComponent(() =>
    import('./ComponentB.vue')
)
export default {
    components: {
        ComponentA,
        AsyncComponentB
    },
    data() {
        return {
            tabComponent: "ComponentA"
        }
    },
    methods: {
        changeHandle() {
            this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB" : "ComponentA";
        }
    }

}
</script>


